<template>
  <n-button text @click="handle">
    <TextIcon @dblclick="dbHandle" v-if="boardModalStatus==='show'" icon="teenyicons:clipboard-no-access-outline"
              tip="单击隐藏 双击重置"
              :size="size"></TextIcon>
    <TextIcon @dblclick="dbHandle" v-if="boardModalStatus==='hidden'" icon="lucide:clipboard-signature"
              tip="单击显示 双击重置" :size="size"></TextIcon>
    <TextIcon v-if="boardModalStatus==='none'" icon="icon-park-outline:clipboard" tip="白板" :size="size"></TextIcon>
  </n-button>
</template>

<script setup lang="ts">


import {storeToRefs} from "pinia";
import {useAppStore} from "@/store/module/app";
import TextIcon from "@/components/pc/icon/TextIcon.vue";
import {nextTick} from "vue";

const {boardModalStatus, topModalName} = storeToRefs(useAppStore())
defineProps({
  size: {
    type: Number,
    default: 28
  }
})
const handle = () => {
  topModalName.value = 'board'
  if (boardModalStatus.value === 'none' || boardModalStatus.value === 'hidden') {
    boardModalStatus.value = 'show'
  } else if (boardModalStatus.value === 'show') {
    boardModalStatus.value = 'hidden'
  }
}
const dbHandle = () => {
  boardModalStatus.value = 'none'
  nextTick(() => {
    boardModalStatus.value = 'show'
  })
}


</script>

<style scoped>

</style>